<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 面试管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/dashboard.css" rel="stylesheet">
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/sim_interview">
                        <i class='bx bx-video'></i>
                        <span>模拟面试</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="false" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历相关</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="/applicant/reports">
                        <i class='bx bx-line-chart'></i>
                        <span>面试报告</span>
                    </a>
                </li>
                <li class="active">
                    <a href="/applicant/interview_manage">
                        <i class='bx bx-line-chart'></i>
                        <span>面试管理</span>
                    </a>
                </li>



                <li>
                    <a href="/applicant/personal_center">
                        <i class='bx bx-user'></i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 在sidebar后面添加 -->
        <div class="sidebar-overlay"></div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">
                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/img.png') }}" alt="用户头像" class="avatar">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                            {{ full_name }}
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="profile.html">个人设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="dashboard-content">
                <!-- 面试管理 -->
                <div class="section-header">
                    <h5>面试管理</h5>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>职位</th>
                                <th>时间</th>
                                <th>得分</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for interview in all_interviews %}
                            <tr>
                                <td>{{ interview.job_title }}</td>
                                <td>{{ interview.apply_time.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    {% if interview.status in ['已投递', '已查看', '面试中'] %}
                                    <div class="score">
                                        <span class="score-value">暂无</span>
                                        <div class="score-bar" style="--score-width: 0%"></div>
                                    </div>
                                    {% else %}
                                    <div class="score">
                                        <span class="score-value">{{ interview.ai_evaluation_score }}</span>
                                        <div class="score-bar" style="--score-width: {{ interview.ai_evaluation_score }}%"></div>
                                    </div>
                                    {% endif %}
                                </td>
                                <td><span class="status {{ interview.status }}">{{ interview.status }}</span></td>
                                <td>
                                    {% if interview.status == '已查看' %}
                                    <a href="#" class="btn btn-outline-primary">催确认</a>
                                    {% elif interview.status == '面试中' %}
                                    <a href="#" class="btn btn-outline-primary join-interview" data-app-id="{{ interview.application_id }}">参加面试</a>
                                    {% else %}
                                    <a href="/applicant/reports" class="btn btn-outline-primary">查看报告</a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/candidate/interview_manage.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取面试列表
        fetch('/api/get_all_interviews')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const interviewTableBody = document.querySelector('tbody');
                    data.all_interviews.forEach(interview => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${interview.job_title}</td>
                            <td>${new Date(interview.apply_time).toLocaleDateString()}</td>
                            <td>
                                ${interview.status in ['已投递', '已查看', '面试中'] ? `
                                    <div class="score">
                                        <span class="score-value">暂无</span>
                                        <div class="score-bar" style="--score-width: 0%"></div>
                                    </div>
                                ` : `
                                    <div class="score">
                                        <span class="score-value">${interview.ai_evaluation_score}</span>
                                        <div class="score-bar" style="--score-width: ${interview.ai_evaluation_score}%"></div>
                                    </div>
                                `}
                            </td>
                            <td><span class="status ${interview.status}">${interview.status}</span></td>
                            <td>
                                ${interview.status == '已查看' ? `
                                    <a href="#" class="btn btn-outline-primary">催确认</a>
                                ` : interview.status == '面试中' ? `
                                    <a href="#" class="btn btn-outline-primary join-interview" data-app-id="${interview.application_id}">参加面试</a>
                                ` : `
                                    <a href="/applicant/reports" class="btn btn-outline-primary">查看报告</a>
                                `}
                            </td>
                        `;
                        interviewTableBody.appendChild(row);
                    });

                    // 动态生成的元素需要重新绑定事件
                    bindJoinInterviewEvents();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error fetching interview data:', error);
                alert('获取面试数据失败');
            });
    });

    function bindJoinInterviewEvents() {
        document.querySelectorAll('.join-interview').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止默认行为
                console.log('Button clicked:', this); // 调试信息
                const appId = this.getAttribute('data-app-id').trim();
                console.log('App ID:', appId);
                // 发送GET请求将 application_id 传递到后端
                fetch(`/api/applicant/interview-room?application_id=${appId}`, {
                    method: 'GET'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 重定向到 interview-room.html
                        window.location.href = `/applicant/avatar`;
                    } else {
                        alert('进入面试房间失败');
                    }
                })
                .catch(error => {
                    console.error('Error joining interview room:', error);
                    alert('进入面试房间失败');
                });
            });
        });
    }

    // 初始绑定事件
    bindJoinInterviewEvents();
</script>

</body>
</html>